<template>

  <div class="main-content" v-wechat-title="VueTitle">
    <div class="w-1200">
      <div class="pc-top clearfix">
        <div class="top-left fl">
          <div class="user-avatar">
            <router-link :to="{path: '/personalCenter/personalInfo', query: {query:Date.parse(new Date())}}">
              <img v-if="userInfo.avatar" @error="emptyAvatarUrl" :src="imgRequest + userInfo.avatar" alt="">
              <img v-else src="@/assets/images/head_default.png" >
            </router-link>
          </div>
          <div class="info-box">
            <p class="user-name">{{userInfo.nickname}}</p>
            <p class="user-num">{{userInfo.email}}</p>
            
            <div class="level-info">
              <div :class="`level-icon slevel0${LevelSort}`"></div>
              <Tooltip placement="bottom" class="progress-bar loged-progress-bar">
                <span class="progress-inner" ref="refWidthScore"></span>
                <div slot="content">
                  <p>VIP等级:<strong class="c-red">{{LevelName}}</strong>({{user_score}} / {{next_score}})</p>
                  <p v-if="next_status != 1">再获得<em class="c-red">{{differ_score}}</em>成长值即可升级</p>
                  <p v-else>已达到最高等级</p>
                  <p class="btn">
                    <router-link to="/PersonalCenter/vipLevel">
                      如何升级
                    </router-link>
                  </p>
                </div>
              </Tooltip>
            </div>
            <p class="link-box">
              <Tooltip content="电话" placement="bottom">
                <span class="icon icon-tel" :class="{has:userInfo.mobile?true:false}"></span>
              </Tooltip>
              <Tooltip content="邮箱" placement="bottom">
                <span class="icon icon-msg" :class="{has:userInfo.email?true:false}"></span>
              </Tooltip>
              <Tooltip content="微信" placement="bottom">
                <span class="icon icon-wx" :class="{has:userInfo.weixin?true:false}"></span>
              </Tooltip>
              <Tooltip content="银行卡" placement="bottom">
                <span class="icon icon-bank" :class="{has:accountData.is_banded_bank?true:false}"></span>
              </Tooltip>
              <Tooltip content="QQ" placement="bottom">
                <span class="icon icon-qq" :class="{has:userInfo.qq?true:false}"></span>
              </Tooltip>
            </p>
          </div>
        </div>
        <!-- tt -->
        <!-- <div class="border">1</div> -->
        <div class="top-center fl">
          <div class="left fl">
            <p class="title">账号可用余额</p>
            <p class="money"><span>{{accountData.money_usable}}</span>
            </p>
          </div>
          <div class="fl center">
            <p><span class="icon icon-ye"></span>全部余额：<span class="fs-16" :class="[mynum?'':'flot1']" style="color:#4A90E2;">{{accountData.money_usable}}</span></p>
            <p><span class="icon icon-ye1"></span>锁定余额：<span class="fs-16" style="color:#C82834;">{{parseInt(accountData.money_freeze)}}</span></p>
            <p style="display:none;"><span class="icon icon-bao"></span>账号状态： <span>{{accountData.status==0?'有效':'无效'}}</span></p>
          </div>
          <div class="fl bth-box" >
            <router-link to="/topUpCenter">
              <Button :disabled="!flags" type="error" :class="[mynum?'btnrecharge':'btnrecharge2']">充值</Button>
            </router-link>
            <br>
            <router-link to="/topUpCenter/withdraw">
              <Button :disabled="!flags" type="primary" :class="[mynum?'btnrecharge':'btnrecharge2']">提现</Button>
            </router-link>
          </div>
          <div :class="[mynum?'fl right':'fl right2']" @click="transaction">
            <a href="javascript:void(0)">
              <p class="text-center"><span class="icon icon-jing"></span></p>
              <span>查看交易记录></span>
            </a>
          </div>
        </div>
        <!-- <div>1</div> -->
        <!-- dd -->
        <div class="top-right fl">
          <span class="icon icon-dl fl"></span>
          
          <div class="fl" v-if="userInfo.lastlogintime && userInfo.lastlogintime == '1970-01-01 08:00:00'">
            <p>欢迎登录</p>
          </div>
          <div class="fl" v-else>
            <p>{{flags?'上次登录时间':'欢迎登录'}}</p>
            <p v-show="flags">{{userInfo.lastlogintime}}</p>
          </div>
        </div>
      </div>
      <div class="pc-bottom clearfix">
        <h2 class="public-title">
          管理中心<span>Manage Center</span>
        </h2>
        <div class="pc-content-wrapper">
          <div class="pc-left fl">
            <ul id="selectActive">
              <!-- announcement -->
              <router-link  :to="{path:'/personalCenter/announcement',query:{query:Date.parse(new Date())}}" tag="li" class="item-list" active-class="active"><a href="javascript:void(0)"><span class="icon icon-fk"></span>平台公告</a></router-link>
              <router-link  :to="{path:'/personalCenter/personalInfo',query:{query:Date.parse(new Date())}}" tag="li" class="item-list" active-class="active"><a href="javascript:void(0)"><span class="icon icon-fk"></span>个人信息</a></router-link>
              <router-link  :to="{path:'/personalCenter/securitySetting',query:{query:Date.parse(new Date())}}"  tag="li" class="item-list" active-class="active"><a v-show="flags" href="javascript:void(0)"><span class="icon icon-aq"></span>安全设置</a></router-link>
              <router-link  :to="{path:'/personalCenter/cardManager',query:{query:Date.parse(new Date())}}" tag="li" class="item-list" active-class="active"><a v-show="flags" href="javascript:void(0)"><span class="icon icon-bg"></span>银行卡管理</a></router-link>
              <li class="item-list down" :class="{active:agencyShareShow}"><a href="javascript:void(0)" @click="toggleAgencyShare(1)"><span class="icon icon-dl"></span>代理分享</a>
                <ul class="sub-list" v-show="agencyShareShow">
                  <router-link :to="{path:'/personalCenter/agencyShare',query:{query:Date.parse(new Date())}}" active-class="active" tag="li"><a href="javascript:void(0)"><span class="icon icon-right"></span>代理分享</a></router-link>
                  <router-link :to="{path:'/personalCenter/agencyRole',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"><a href="javascript:void(0)"><span class="icon icon-right"></span>代理制度</a></router-link>
                </ul>
              </li>
              <li class="item-list down" active-class="active" :class="{active:teamManagerListShow}"><a v-show="flags" href="javascript:void(0)" @click="toggleTeamManager(1)"><span class="icon icon-td"></span>团队管理</a>
                <ul class="sub-list" v-show="teamManagerListShow">
                  <router-link :to="{path:'/personalCenter/vipReport',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"  ><a href="javascript:void(0)"><span class="icon icon-right"></span>会员报表</a></router-link>
                  <router-link :to="{path:'/personalCenter/teamReport',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"  ><a href="javascript:void(0)"><span class="icon icon-right"></span>团队报表</a></router-link>
                  <router-link :to="{path:'/personalCenter/agency',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"  ><a href="javascript:void(0)"><span class="icon icon-right"></span>代理报表</a></router-link>
                  <router-link :to="{path:'/personalCenter/self',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"  ><a href="javascript:void(0)"><span class="icon icon-right"></span>自身统计</a></router-link>
                  <router-link :to="{path:'/personalCenter/underAccount',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"  ><a href="javascript:void(0)"><span class="icon icon-right"></span>下线开户</a></router-link>
                </ul>
              </li>
              <li class="item-list down" active-class="active" :class="{active:betRecordShow}"><a href="javascript:void(0)" @click="toggleBetRecord(1)"><span class="icon icon-tz"></span>投注记录</a>
                <ul class="sub-list" v-show="betRecordShow">
                  <router-link :to="{path:'/personalCenter/betRecord',query:{query:Date.parse(new Date())}}" active-class="active" tag="li"><a  href="javascript:void(0)"><span class="icon icon-right"></span>投注记录</a></router-link>
                  <router-link v-if="casinoSwitch && casinoSwitch.status == 1" :to="{path:'/personalCenter/gameRecord',query:{query:Date.parse(new Date())}}"  active-class="active" tag="li"><a  href="javascript:void(0)"><span class="icon icon-right"></span>游戏记录</a></router-link>
                </ul>
              </li>
              <router-link :to="{path:'/personalCenter/dealDetail',query:{query:Date.parse(new Date())}}" class="item-list" active-class="active" tag="li"><a  href="javascript:void(0)"><span class="icon icon-jy"></span>交易记录</a></router-link>
              <router-link v-if="flags" :to="{path:'/personalCenter/myFollow',query:{query:Date.parse(new Date())}}" class="item-list" active-class="active" tag="li"><a  href="javascript:void(0)"><span class="icon icon-jy"></span>我的关注</a></router-link>
            </ul>
          </div>
          <div class="pc-right fl">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 升级提示 -->
    <div v-if="upgradeFlag">
      <div class="ivu-modal-mask" ></div>
      <div class="ivu-modal-wrap vertical-center-modal vip-upgrade-modal" @click="CloseUpgrade">
          <img src="@/assets/images/close5.png" class="closeImg" @click="CloseUpgrade" title="close">
          <img :src="require('../../assets/images/vip/'+imgUrl+'.png')" class="bounceIn">
          <div class="beam"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      VueTitle: "用户中心", //页面标题
      
      mynum: true,
      agencyShareShow: false, //代理管理
      teamManagerListShow: false, //团队管理默认不展开
      betRecordShow: false,
      userInfoData: {},
      accountUserData: {},
      flags: "",
      progressWidth: "", //进度条
      LevelSort:"", //当前等级
      LevelName: "", //当前等级名称
      user_score: 0, //当前积分
      next_score:0, //下一级积分
      differ_score:0, //距离升级差的积分
      next_status:"0",  //是否到最高级别
      upgradeFlag: false,
      imgUrl: 0,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "accountData", 'getEmail', 'casinoSwitch'])
  },
  
  created() {
    let webSit = this.$route.path
    if (webSit == '/personalCenter/agencyShare' || webSit == '/personalCenter/agencyRole') { //代理分享
      this.toggleAgencyShare();
    }
    if (webSit == '/personalCenter/vipReport' || webSit == '/personalCenter/teamReport' || webSit == '/personalCenter/agency' || webSit == '/personalCenter/self' || webSit == '/personalCenter/underAccount') { //团队管理
      this.toggleTeamManager();
    }

    this.flags = JSON.parse(localStorage.getItem("isUser"));
    var vm = this;
    if (vm.userInfo.username) {
      setTimeout(function() {
        vm.nextScore();
      }, 20);
    }
  },
  mounted() {
    
  },
  methods: {
    ...mapActions(["SET_ACCOUNT_DATA"]),
    emptyAvatarUrl() { //清空头像路径
      this.userInfo.avatar = ''
    },
    nextScore() {
      var vm = this;
      this.LevelSort = this.userInfo.honor.sort; //当前等级
      this.LevelName = this.userInfo.honor.name; //当前等级名称
      var score = Number(this.userInfo.honor.score); //上一级的标准
      this.next_score =Number(this.userInfo.honor.next_score) ; //下一级的标准
      // this.user_score = 400; //当前积分测试数据
      this.user_score = Number(this.userInfo.honor.user_score); //当前积分
      this.differ_score = this.next_score - this.user_score; //距离升级差的积分
      this.next_status = this.userInfo.honor.next_status; //是否到最高级别
      var upgrade = this.userInfo.honor.upgrade; //是否升级
      if (this.next_status == 1) {
        this.widthScore = 100;
      } else {
        this.widthScore = Math.ceil(
          (this.user_score - score) / (this.next_score - score) * 100
        );
      }
      this.$refs.refWidthScore.style.width = this.widthScore + "%";
      if (upgrade == 1) {
        this.upgradeFlag = true;
        this.imgUrl = this.userInfo.honor.grade;
        // setTimeout(function() {
        //   vm.CloseUpgrade();
        // }, 6000);
      }
    },
    //关闭升级弹框
    CloseUpgrade() {
      var dataName = {
        token: localStorage.getItem("token")
      };
      this.upgradeFlag = false;
      this.$http
        .post(this.urlRequest + "?m=api&c=user&a=closeHonorBox", dataName)
        .then(res => {
          if (res.data.status == 0) {
            this.userInfoData.honor.upgrade = 0;
            localStorage.setItem("userInfo", JSON.stringify(this.userInfoData));
          }
        });
    },
    transaction() {
      this.$router.push({
        path: "/personalCenter/dealDetail",
        query: {'query': Date.parse(new Date())}
      });
    },
    toggleAgencyShare: function(flag) { //代理分享
      this.teamManagerListShow = false;
      this.betRecordShow = false;
      this.agencyShareShow = !this.agencyShareShow;
      if (flag) {
        this.$router.push({
          path: "/personalCenter/agencyShare",
          query: {'query': Date.parse(new Date())}
        });
      }
    },
    toggleTeamManager: function(flag) { //团队管理
      this.agencyShareShow = false;
      this.betRecordShow = false;
      this.teamManagerListShow = !this.teamManagerListShow;
      if (flag) {
        this.$router.push({
          path: "/personalCenter/vipReport",
          query: {'query': Date.parse(new Date())}
        });
      }
    },
    toggleBetRecord: function(flag) { //投注记录
      this.betRecordShow=!this.betRecordShow
      this.agencyShareShow = false;
      this.teamManagerListShow = false;
      if (flag) {
        this.$router.push({
          path: "/personalCenter/betRecord",
          query: {'query': Date.parse(new Date())}
        });
      }
    },
  },
  watch: {
    userInfo(obj) {
      var vm = this;
      if (obj.username) {
        setTimeout(function() {
          vm.nextScore();
        }, 20)
      }
    },
    $route(to,from){
      let webSit = this.$route.path
      if (!(webSit == '/personalCenter/agencyShare' || webSit == '/personalCenter/agencyRole')) { //代理分享
        this.agencyShareShow = false;
      }
      if (!(webSit == '/personalCenter/vipReport' || webSit == '/personalCenter/teamReport' || webSit == '/personalCenter/agency' || webSit == '/personalCenter/self' || webSit == '/personalCenter/underAccount')) { //团队管理
        this.teamManagerListShow = false;
      }
      if(!(webSit == '/personalCenter/gameRecord' || webSit == '/personalCenter/betRecord')){
        this.betRecordShow = false;
      }
    }
  }
};
</script>
<style scoped>
.pc-content-wrapper {
  display: flex;
}
.pc-top {
  position: relative;
}
span.fs-16.flot1 {
  font-size: 12px;
}
.pc-top .top-center {
  padding: 0px 20px;
  border-left: 1px solid #c7c6c6;
  border-right: 1px solid #c7c6c6;
  margin-top: 10px;
  padding-top: 20px;
}
.pc-top .left {
  margin-right: 26px;
}
.btnrecharge,
.btnrecharge2 {
  margin-bottom: 8px;
  width: 130px;
  font-size: 16px;
}
.fl.right2 {
  display: none;
}
.pc-top .top-right {
  padding: 55px 10px;
}
.fl.bth-box.max {
  width: 77px;
}
button.ivu-btn.ivu-btn-error.btnrecharge2 {
  margin-bottom: 10px;
}
.pc-bottom .pc-left {
  min-height: 600px;
}
.fl.right {
  position: absolute;
  right: 235px;
}
.pc-top .bth-box {
  position: absolute;
  right: 335px;
}
.vip-upgrade-modal {
  overflow: hidden;
}
.vip-upgrade-modal .closeImg {
  z-index: 1;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-top: -100px;
  margin-left: 120px;
  cursor: pointer;
}
.vip-upgrade-modal .beam {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -225px;
  margin-left: -225px;
  z-index: -1;
  text-align: center;
  width: 450px;
  height: 450px;
  line-height: 450px;
  /* background: url("../../assets/images/shinebg_pic@3x.png") no-repeat center; */
  animation: beam-rotate 20s linear forwards infinite;
}
@keyframes beam-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.vip-upgrade-modal .bounceIn {
  cursor: pointer;
  animation-name: bounceIn;
  animation-duration: 0.75s;
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
</style>





// WEBPACK FOOTER //
// src/components/PersonalCenter/PersonalCenter.vue